<.settings_tiles>
  <% email_reports = [
    weekly: %{
      report: @weekly_report,
      disable_route: :disable_weekly_report,
      enable_route: :enable_weekly_report,
      remove_route: :remove_weekly_report_recipient,
      add_route: :add_weekly_report_recipient,
      heading: "Weekly Email Reports",
      subtitle: "Send weekly analytics reports to as many addresses as you wish",
      toggle: "Send a weekly email report every Monday",
      add_label: "Add Weekly Report Recipient"
    },
    monthly: %{
      report: @monthly_report,
      disable_route: :disable_monthly_report,
      enable_route: :enable_monthly_report,
      remove_route: :remove_monthly_report_recipient,
      add_route: :add_monthly_report_recipient,
      heading: "Monthly Email Reports",
      subtitle: "Send monthly analytics reports to as many addresses as you wish",
      toggle: "Send a monthly email report on 1st of the month",
      add_label: "Add Monthly Report Recipient"
    }
  ] %>

  <.tile :for={{_type, meta} <- email_reports} docs="email-reports">
    <:title>
      {meta.heading}
    </:title>
    <:subtitle>
      {meta.subtitle}
    </:subtitle>

    <.form
      for={nil}
      action={
        (meta.report && Routes.site_path(@conn, meta.disable_route, @site.domain)) ||
          Routes.site_path(@conn, meta.enable_route, @site.domain)
      }
      method="post"
    >
      <div>
        <.toggle_submit set_to={meta.report}>
          {meta.toggle}
        </.toggle_submit>
      </div>
    </.form>

    <div :if={meta.report} class="mt-4">
      <.table
        :if={Enum.count(meta.report.recipients) > 0}
        width="w-1/2"
        rows={meta.report.recipients}
      >
        <:thead>
          <.th>
            Recipients
          </.th>
          <.th invisible>Actions</.th>
        </:thead>

        <:tbody :let={recipient}>
          <.td>
            <div class="flex items-center gap-x-2">
              <Heroicons.envelope_open class="w-6 h-6 feather" />
              <div>
                {recipient}
              </div>
            </div>
          </.td>
          <.td actions>
            <.delete_button
              method="delete"
              href={
                Routes.site_path(
                  @conn,
                  meta.remove_route,
                  @site.domain,
                  recipient
                )
              }
            />
          </.td>
        </:tbody>
      </.table>

      <.form
        :let={f}
        class="mt-4"
        for={@conn}
        action={Routes.site_path(@conn, meta.add_route, @site.domain)}
        method="post"
      >
        <div class="flex items-end gap-x-2">
          <PlausibleWeb.Live.Components.Form.input
            field={f[:recipient]}
            type="email"
            required
            placeholder="e.g. joe@example.com"
            mt?={false}
          />
          <.button type="submit" mt?={false}>
            Add Recipient
          </.button>
        </div>
      </.form>
    </div>
  </.tile>

  <% change_notifications = [
    spike: %{
      notification: @spike_notification,
      heading: "Traffic Spike Notifications",
      subtitle: "Get notified when your site has unusually high number of current visitors",
      threshold_text: "Current visitors threshold",
      toggle: "Send notifications of traffic spikes"
    },
    drop: %{
      notification: @drop_notification,
      heading: "Traffic Drop Notifications",
      subtitle:
        "Get notified when your site has unusually low number of visitors within 12 hours",
      threshold_text: "12 hours visitor threshold",
      toggle: "Send notifications of traffic drops"
    }
  ] %>

  <.tile :for={{type, meta} <- change_notifications} docs="traffic-spikes">
    <:title>
      {meta.heading}
    </:title>
    <:subtitle>
      {meta.subtitle}
    </:subtitle>

    <.form
      for={nil}
      action={
        (meta.notification &&
           Routes.site_path(@conn, :disable_traffic_change_notification, @site.domain, type)) ||
          Routes.site_path(@conn, :enable_traffic_change_notification, @site.domain, type)
      }
      method="post"
    >
      <.toggle_submit set_to={meta.notification}>
        {meta.toggle}
      </.toggle_submit>
    </.form>

    <.form
      :let={f}
      :if={meta.notification}
      class="mt-4"
      for={Plausible.Site.TrafficChangeNotification.changeset(meta.notification, %{})}
      action={Routes.site_path(@conn, :update_traffic_change_notification, @site.domain, type)}
    >
      <div class="flex items-end gap-x-4">
        <PlausibleWeb.Live.Components.Form.input
          field={f[:threshold]}
          type="number"
          required
          label={meta.threshold_text}
        />
        <.button type="submit" mt?={false}>
          Save Threshold
        </.button>
      </div>
    </.form>

    <div class="mt-4">
      <.table
        :if={meta.notification && Enum.count(meta.notification.recipients) > 0}
        width="w-1/2"
        rows={meta.notification.recipients}
      >
        <:thead>
          <.th>
            Recipients
          </.th>
          <.th invisible>Actions</.th>
        </:thead>

        <:tbody :let={recipient}>
          <.td>
            <div class="flex items-cetner gap-x-2">
              <Heroicons.envelope_open class="w-6 h-6 feather" />
              <div>
                {recipient}
              </div>
            </div>
          </.td>
          <.td actions>
            <.delete_button
              method="delete"
              href={
                Routes.site_path(
                  @conn,
                  :remove_traffic_change_notification_recipient,
                  @site.domain,
                  type,
                  recipient
                )
              }
            />
          </.td>
        </:tbody>
      </.table>
    </div>

    <div :if={meta.notification}>
      <.form
        :let={f}
        for={@conn}
        class="mt-4"
        action={
          Routes.site_path(
            @conn,
            :add_traffic_change_notification_recipient,
            @site.domain,
            type
          )
        }
      >
        <div class="flex items-end gap-x-4">
          <PlausibleWeb.Live.Components.Form.input
            field={f[:recipient]}
            type="email"
            placeholder="e.g. joe@example.com"
            mt?={false}
            required
          />
          <.button type="submit" mt?={false}>
            Add Recipient
          </.button>
        </div>
      </.form>
    </div>
  </.tile>
</.settings_tiles>
